<!--
 * @Description: 
 * @Autor: 田力源
 * @Date: 2023-02-20 14:57:26
 * @LastEditors: 田力源
 * @LastEditTime: 2023-02-20 14:57:35
-->
<template>
    <div class="intro" v-loading="loading">
        <div class="intro-box" >
            <div class="intro-item" v-for="item in introList" :key="item.id" @click="showDetail(item)">
                <div class="item-left">
                    <img class="cover" :src="baseUrl + item.image">
                </div>
                <div class="item-right">
                    <h2 class="title">{{ item.title }}</h2>
                    <div class="outline">{{ item.outline }}</div>
                    <div class="createTime">{{ item.createTime }}</div>
                    <div class="user">{{ item.nickname }}</div>
                </div>
            </div>
            <PagingVue v-if="pageInfo.total>10" :totalPages="pageInfo.totalPage" :pagingMethod="getdata"/>
        </div>
        <el-empty description="暂无新闻" style="marginTop:200px" v-if="!introList.length && !loading"/>
        <detailVue ref="detail" :info="hoverintro"/>
    </div>
</template>

<script setup lang="ts">
import PagingVue from "@/components/Paging.vue";
import detailVue from './detail.vue'
import { ref,reactive } from "vue";
import { ElMessage } from 'element-plus'
import {getPage} from '@/api/article'

const baseUrl = window.config.baseUrl;
const detail :any = ref(null);
const loading = ref(false)

const hoverintro = ref({})
// 展示帖子详情页
const showDetail = (item:any)=>{
    hoverintro.value = item
    detail.value.emitShow();
}
const pageInfo = reactive({
    limit: 10,
    page: 1,
    total: 0,
    totalPage: 0
})

type intro = {
    id: number;
    title:string;
    outline:string;
    createTime:string;
    nickname:string;
    likes:string;
    image:string;
};
const introList= ref([] as intro[])
// 获取数据
const getdata = (page?: number)=>{
    loading.value = true;
    if (page) pageInfo.page = page;
    const params = {
        limit:pageInfo.limit,
        page:pageInfo.page,
        type:'news'
    }
    getPage(params).then((res:any)=>{
        if(res.code !== 200) return ElMessage.error('获取帖子列表失败！！')
        const {data} = res;
        pageInfo.totalPage = data.totalPage;
        pageInfo.total = data.total;
        introList.value = data.data
    }).finally(()=>{
        loading.value = false;
    })
}
getdata()
</script>

<style scoped lang="scss">
 .intro {
    width: 90%;
    margin: 5px auto;
    position: relative;
    background-color: #fff;
    height: 900px;
    overflow-y: auto;
    scrollbar-width: none;
    /* Firefox */
    &::-webkit-scrollbar {
        display: none;
        /* Chrome Safari */
    }
}

.intro-box {
    overflow: hidden;

    .intro-item {
        width: 60%;
        margin: 20px auto;
        padding: 35px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        display: flex;
        align-items: center;
        transition: all .3s;
        cursor: pointer;

        &:hover {
            transform: translateY(-5px);
        }

        .item-left {
            margin-right: 20px;
            .cover{
                width: 300px;
                height: 180px;
                border-radius: 10px;
            }
        }

        .item-right {
            height: 180px;
            width: 650px;
            position: relative;
            .title{
                width: 100%;
                font-size: 28px;
                margin-bottom: 8px;
                overflow:hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                -o-text-overflow:ellipsis;
            }
            .outline{
                width: 100%;
                color:#666;
                overflow:hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 3;
                display: -webkit-box;
                -webkit-box-orient: vertical;
            }
            .createTime {
                position: absolute;
                bottom: 0px;
                left: 0px;
                font-size: 18px;
                color: #ccc;
            }
            .user{
                margin-top: 10px;
            }
        }
    }
}
.publish{
    position:fixed;
    right:115px;
    bottom: 100px;
    width: 80px;
    height: 80px;
    background-color: rgb(255, 204, 0);
    border-radius: 50%;
    text-align: center;
    line-height: 80px;
    transition: all .3s;
    &:hover{
        width: 100px;
        height: 100px;
        line-height: 100px;
        .iconfont{
            font-size: 50px;
        }
    }
    cursor: pointer;
    .iconfont{
        font-size: 46px;
        color: white;
    }
}   
</style>